<template>
  <v-row justify="center">
    <v-dialog
      v-model="dialog_"
      transition="dialog-bottom-transition"
      max-width="600px"
    >
      <v-card>
        <v-card-title>
          <span class='text-h5'>上传照片</span>
        </v-card-title>
        <v-divider/>
        <v-card-text>
          <v-row class='my-0'>
            <v-col cols='12' class='pb-0'>
              <v-select
                v-if='isGroup'
                :items="groupNames"
                filled
                label="选择分组"
                @change='selectGroup'
              ></v-select>
            </v-col>
            <v-col cols='12'>
              <v-text-field
                label='图片名'
                persistent-hint
                v-model='uploadData.name'
              />
            </v-col>
            <v-col cols='12'>
              <v-file-input
                accept="image/*"
                label="图片上传"
                show-size
                v-model='uploadUrl'
              ></v-file-input>
            </v-col>
          </v-row>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="red lighten-3"
            text
            @click="dialog_ = false"
          >
            返回
          </v-btn>
          <progress-button
            :text="true"
            :loading='loading'
            :disabled='btnDisabled'
            progressColor="gray darken-1"
            color="red lighten-3"
            @click="upload"
            title="上传">
          </progress-button>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>

<script>
  import progressButton from '@/components/common/ProgressButton'
  import imagesApi from '@/api/apiPath/imagesApi'
  import { fileToBase64 } from '@/utils'
  import groupApi from '@/api/apiPath/groupApi'

  export default {
    name: 'ImageUploadDialog',
    components: {
      progressButton
    },
    props: {
      dialog: {
        types: Boolean,
        default: false
      },
      isGroup: {
        types: Boolean
      },
      groups: {
        types: []
      }
    },
    data() {
      return {
        loading: false,
        imgPath: {},
        btnDisabled: true,
        uploadData: {
          name: '',
          path: null
        }
      }
    },
    computed: {
      dialog_: {
        get() {
          return this.dialog;
        },
        set(val) {
          this.resetField()
          //改变由父组件控制
          this.$emit('on-change-dialog', val);
        }
      },
      uploadUrl: {
       get() {
         return this.imgPath
       },
       async set(val) {
          fileToBase64(val,(result) => {
            //处理base64字符串
            this.uploadData.path = result.replace(/^data:image\/\w+;base64,/, '')
          })
        }
      },
      groupNames: {
        get() {
          return this.groups.map(g => g.GROUP_NAME)
        }
      }
    },
    watch: {
      isGroup: {
        handler(val) {
          if (val) {
            this.uploadData.groupName = ''
          } else {
            delete this.uploadData.groupName
          }
        }
      },
      uploadData: {
        handler(val) {
          let flag = false
          for (const item in val) {
            if (!val[item]) {
              flag = true
            }
          }
          this.btnDisabled = flag
        },
        deep: true
      }
    },
    methods: {
      resetField() {
        this.imgPath = {}
        this.uploadData = {
          name: '',
          path: null
        }
      },
      selectGroup(val) {
        this.selectedGroup = val
        this.uploadData.groupName = val
      },
      upload() {
        const that = this
        this.loading = true
        imagesApi.uploadImage(this.uploadData).then(res => {
          that.loading = false
          if (res.message === '成功') {
            this.dialog_ = false
            this.$toast.success(res.data)
            this.$emit('on-save')
          } else {
            this.$toast.error(res.data)
          }
        })
          .catch(err => {
            console.log(err)
            that.loading = false
          })
      }
    }
  }
</script>

<style scoped>

</style>
